@thi.ng/canvas

This is a standalone project, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.

• About
• Status
• Installation
• Dependencies
• Usage examples
• API
• Authors
• License

About

Canvas creation & HDPI support helpers.

This package provides small frequently used helpers for HTML Canvas 2D creation & resizing:

• adaptiveCanvas2d()
• canvas2d()
• pixelCanvas2d()
• adaptDPI()
• isHighDPI()

Status

STABLE - used in production

Search or submit any issues for this package

Note: Some functions were previously part of the thi.ng/adapt-dpi and thi.ng/pixel packages, but have been migrated to this package for better/smaller re-use...

Installation

yarn add @thi.ng/canvas

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/canvas"></script>

Skypack documentation

For Node.js REPL:

const canvas = await import("@thi.ng/canvas");

Package sizes (brotli'd, pre-treeshake): ESM: 279 bytes

Dependencies

None

Usage examples

Several projects in this repo's /examples directory are using this package:

Screenshot	Description	Live demo	Source
	Self-modifying, animated typographic grid with emergent complex patterns	Demo	Source
	geom-fuzz basic shape & fill examples	Demo	Source
	Visualization of different grid iterator strategies	Demo	Source
	Basic hiccup-based canvas drawing	Demo	Source
	Barnsley fern IFS fractal renderer	Demo	Source
	Pixel buffer manipulations	Demo	Source
	Showcase of various dithering algorithms	Demo	Source
	Image dithering and remapping using indexed palettes	Demo	Source
	Normal map creation/conversion basics	Demo	Source
	RGB waveform image analysis	Demo	Source
	Port-Duff image compositing / alpha blending	Demo	Source
	Steering behavior drawing with alpha-blended shapes	Demo	Source
	Entity Component System w/ 100k 3D particles	Demo	Source
	Visual comparison of biased vs. unbiased normal vectors projected on the surface of a sphere	Demo	Source
	WebGL cube maps with async texture loading	Demo	Source
	WebGL instancing, animated grid	Demo	Source
	WebGL MSDF text rendering & particle system	Demo	Source
	Minimal multi-pass / GPGPU example	Demo	Source

API

Generated API docs

TODO

Authors

• Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

@misc{thing-canvas,
  title = "@thi.ng/canvas",
  author = "Karsten Schmidt",
  note = "https://thi.ng/canvas",
  year = 2023
}

License

© 2023 - 2024 Karsten Schmidt // Apache License 2.0